<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画一</title>
	<style>
		li {
			list-style-type: none;
			border: 1px solid #ebebeb;
			width: 200px;
			height: 50px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul>
		<li>line1</li>
		<li>line2</li>
		<li>line3</li>
		<li>line4</li>
		<li>line5</li>
	</ul>

	<script>
		var lis = document.getElementsByTagName("li");
		function animate(dom, css, time) {

		}

		for (var i = lis.length - 1; i >= 0; i--) {
			lis[i].onclick = (function(li) {
				return function() {
					var timer = setInterval(function() {
						if(!li.getAttribute("op")){
							li.setAttribute("op", 100);
						}
						var op = li.getAttribute("op");
						// console.log(op);
						op -= 15;
						li.setAttribute("op", op);
						if(op <= 0) {
							li.style.opacity = op / 100;
							clearInterval(timer);
							li.parentNode.removeChild(li);
						}
						else{
							li.style.opacity = op / 100;
						}
						
					},82);
				}
			})(lis[i]);
		};
	</script>
</body>
</html>